<?php
    $uid = Yii::$app->session->get('uid');
 ?>
<link rel="stylesheet" href="https://file.viplgw.cn/ui/thinku-ielts-new/css/teacher/detail.css?v=1.2.3.1">
<style>
    *{
        text-indent: inherit!important;
    }
</style>

<section id="teacherDetailCover">
    <p class="headlineTitle"><a href="/">首页</a> &gt; <a href="/teacher.html">师资介绍</a> &gt;  <?php echo $detail['name']?>老师专栏</p>
    <div class="teacherTop">
        <div class="teacherTopLeft">
            <img class="teacherAva" src="<?php echo $detail['pic']?>" alt="">
            <div class="teacherLevel">
                <p><?php if($detail['seniority']==1){echo '首席';}elseif($detail['seniority']==2){echo '总监';}else{echo '金牌';}?></p>
                <p>讲师</p>
            </div>
        </div>
        <div class="teacherTopCenter">
            <p class="teacherName"><?php echo $detail['name']?></p>
            <div class="duties">
                <p><span>讲师级别</span>：<?php if($detail['seniority']==1){echo '首席';}elseif($detail['seniority']==2){echo '总监';}else{echo '金牌';}?></p>
                <p><span>主讲科目</span>：<?php echo $detail['subject']?></p>
                <p><span>教龄</span>：<?php echo isset($detail['year'])?$detail['year']:5?>年</p>
            </div>
        </div>
        <div class="teacherTopRight">
            <a onclick="_czc.push(['_trackEvent','老师详情','联系老师','<?php echo $detail['name']?>',''])" href="javascript:void(0)" @click="contactTeacher('<?php echo $detail['name']?>')">联系老师</a>
            <a onclick="_czc.push(['_trackEvent','老师详情','预约试听','<?php echo $detail['name']?>',''])" href="javascript:void(0)" @click="reserveTeacher('<?php echo $detail['name']?>')">预约试听</a>
        </div>
    </div>
    <div class="headlineCover">
        <div class="headlineLeft">
            <div class="leftNav">
                <a href="javascript:void(0)" :class="nav == 0?'on':''" @click="changeNav(0,'资深讲师简介','<?php echo $detail['name']?>')">资深讲师简介</a>
<!--                <a href="javascript:void(0)" :class="nav == 1?'on':''"  @click="changeNav(1,'文章列表','--><?php //echo $detail['name']?><!--')">文章列表</a>-->
            </div>
            <!--资深讲师简介-->
            <div  v-show="nav == 0">
                <div class="Introduction"><?php echo $detail['introduction']?></div>
                <div class="introTitle">
                    <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/guide/27@2x.png" alt="">
                    <span>试听课程</span>
                </div>
                <!-- 视频 -->
                <?php
                $videoUrl = isset($detail['url'])?$detail['url']:'';
                $res = json_decode(app\libs\Method::post('https://live.thinkwithu.com/api/play/pc-video',['word'=>$videoUrl]), true);
                if ($res['code'] == 1) {
                    $videoUrl = $res['data']['video'];
                }
                ?>
                <input type="hidden" value="<?php echo $videoUrl?>" id="videoUrl"> <!-- 视频链接地址 -->
                <div :class="isFull?'videoBoxFull':'videoBox'" v-cloak>
                    <div  :class="isFull?'maskCoverFull':'maskCover'" v-cloak  v-show="isTip">
                        <div class="maskCenter">
                            <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/guide/propcha.png" alt=""  class="machineClose" @click="again">
                            <p>观看完整试听课程，<br> 需登录观看</p>
                        </div>
                    </div>
                    <!-- 视频播放 -->
                    <div :class="isFull?'playVideoBoxFull':'playVideoBox'" v-cloak>
                        <!--  视频播放容器-->
                        <div id="playContent"></div>
                        <!--  默认背景遮罩 -->
                        <div class="videoBoxDetaut"  v-if="!isPlay">
                            <a href="javascript:void(0)" class="courseImgPlay" @click="playVideo()">
                                <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/course/playBtn1.png" alt="">
                            </a>
                        </div>
                        <div :class="isFull?'videoUiFull':'videoUi'" v-cloak>
                            <div class="videoUiLeft">
                                <a href="javascript:void(0)" v-if="!isPlay" @click="playVideo()">
                                    <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/course/77.png" alt="">
                                </a>
                                <a href="javascript:void(0)" v-else @click="pauseVideo()">
                                    <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/course/78.png" alt="">
                                </a>
                                <span class="nowTime">{{current}}</span>
                                <span>/</span>
                                <span class="totleTime">{{duration}}</span>
                            </div>
                            <div class="videoUiRight">
                                <a href="javascript:void(0)" v-if="!isFull" @click="fullScrren()">
                                    <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/course/85.png" alt="">
                                </a>
                                <a href="javascript:void(0)" v-else @click="outfullScrren()">
                                    <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/course/84.png" alt="">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="introTitle">
                    <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/guide/28@2x.png" alt="">
                    <span>学员评价</span>
                </div>
                <div class="assessCover">
                    <!--   assessItem 循环-->
                    <?php $word = explode('<br />', nl2br($detail['student_word']));
                    if($word!=false){
                        foreach ($word as $k=>$v) {
                            if($v!=false){
                            ?>
                            <div class="assessItem">
                                <div class="assessImg">
                                    <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/guide/29@2x.png" alt="">
                                </div>
                                <div class="assessLeft">
                                    <div class="assessName">
                                        <span>申友雅思 sy<?php echo $detail['id']*7+$k*24+6748?></span>
                                 <span>
                                     <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/guide/30@2x.png" alt="">
                                     <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/guide/30@2x.png" alt="">
                                     <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/guide/30@2x.png" alt="">
                                     <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/guide/30@2x.png" alt="">
                                     <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/guide/30@2x.png" alt="">
                                 </span>
                                    </div>
                                    <div class="assessContent"><?php echo $v ?></div>
                                    <!--                            <p class="assessTime">2021.01.15</p>-->
                                </div>
                            </div>
                        <?php }
                        }
                    } ?>
                </div>
            </div>
            <!--文章列表-->
            <div  v-show="nav == 1">
                <!--   articleItem 循环-->
                <?php foreach($article as $k=>$v){?>
                <a onclick="_czc.push(['_trackEvent','老师详情-文章列表','查看文章','<?php echo $detail['name']?>',''])" href="/news-information/<?php echo $v['id']?>.html" class="articleItem">
                    <p class="articleName"><?php echo $v['name']?></p>
                    <div class="articleContent"><?php echo $v['summary']?></div>
                    <div class="articleAuthor">
                        <p><?php echo $v['author']?>老师发布于<?php echo date('Y-m-d H:i:s',$v['pushTime'])?></p>
<!--                        <p> 查看：--><?php //echo $v['viewCount']?><!--丨回复：10</p>-->
                        <p> 查看：<?php echo $v['viewCount']?></p>
                    </div>
                </a>
                <?php }?>
            </div>
        </div>
        <div class="headlineRight">
            <div class="experienceCourse">
                <div class="experienceContent">
                    <input onclick="_czc.push(['_trackEvent','师资团队-机经获取','填写手机号','',''])" type="text" v-model="phone" class="phoneNum" placeholder="请输入您的手机号码">
                    <div class="phoneCodeCover">
                        <input onclick="_czc.push(['_trackEvent','师资团队-机经获取','填写验证码','',''])" type="text" v-model="code" class="phoneCode" placeholder="验证码" >
                        <a href="javascript:void(0)" class="codeBtn" @click="getCode">{{text}}</a>
                    </div>
                    <a href="javascript:void(0)" class="upBtn" @click="submitSure">机经获取</a>
                </div>
            </div>

            <!-- 干货分享 -->
            <div class="hotCourseCover">
                <div class="rightTitle">
                    <p>干货分享</p>
                    <a onclick="_czc.push(['_trackEvent','师资团队-干货分享','MORE>','',''])" href="/news/share.html">MORE <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/zx/4@2x.png" alt=""></a>
                </div>
                <?php foreach ($recommend as $k=>$v) { ?>
                    <a onclick="_czc.push(['_trackEvent','干货分享','查看详情','<?php echo  $v['name']?>',''])"  href="/news-information/<?php echo $v['id']?>.html" class="leadNewItem" >
                        <p class="leadNewImg">
                            <img src="<?php echo $v['pic']?>" alt="">
                            <span><?php echo $k+1?></span>
                        </p>
                        <div class="leadNewRight">
                            <p class="newsWords"><?php echo  $v['name']?></p>
                            <p class="ydNum"><span><?php echo $v['pushTime']==false?date('Y-m-d',$v['createTime']):date('Y-m-d',$v['pushTime'])?></span><span><?php echo  $v['viewCount']?>人阅读</span></p>
                        </div>
                    </a>
                <?php }?>
            </div>
        </div>
    </div>
    <!-- 预约试听老师弹窗 -->
    <div class="reserveProp"  v-cloak v-show="reserve">
        <div class="reserveCenter">
            <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/guide/propcha.png" alt=""  class="machineClose" @click="reserve = false">
            <p class="reserveTitle">预约试听</p>
            <input type="text" v-model="reservePhone" class="reserveInputPhone" placeholder="请输入您的手机号">
            <div class="reserveCodeCover">
                <input type="text" v-model="reserveCode" class="reservePhoneCode" placeholder="请输入验证码">
                <a href="javascript:void(0)" class="reserveCodeBtn" @click="reserveGetCode">{{reserveText}}</a>
            </div>
            <a href="javascript:void(0)" class="reserveBtn" @click="reserveSubmitSure">预约试听</a>
        </div>
    </div>
    <!-- 联系老师弹窗 -->
    <div class="contactProp" v-cloak  v-show="contact">
        <div class="contactCenter">
            <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/guide/propcha.png" alt=""  class="machineClose" @click="contact = false">
            <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/guide/mf1.png" alt="" class="mf1">
            <div class="contactRight">
                <p>联系老师</p>
                <p>扫码添加 {{teacher}} 老师的微信二维码， 与老师一对一交流，助你规划提分方案</p>
                <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/guide/erwema.jpg" alt="">
            </div>
        </div>
    </div>
    <!-- 获取成功弹窗 -->
    <div class="machineSuccess" v-cloak  v-show="successPhone">
        <div class="machineCenter">
            <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/guide/xmf.png" alt="" class="xmfLogo">
            <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/guide/propcha.png" alt=""  class="machineClose" @click="successPhone = false">
            <p class="wordsText">{{wordsText}}</p>
            <p class="wordsText2">{{wordsText2}}</p>
            <a href="javascript:void(0)" class="sure" @click="successPhone = false">确认</a>
        </div>
    </div>
</section>


<script type="text/javascript" src="https://file.viplgw.cn/ui/thinku-ielts-new/js/play/cyberplayer.js?v=1.9.1"></script>
<script type="text/javascript" src="https://file.viplgw.cn/ui/thinku-ielts-new/js/play/js/jquery-ui-1.10.3.custom.min.js?v=1.1.1"></script>
<script>
    window.teacherDetailCover = new Vue({
        el: '#teacherDetailCover',
        data() {
            return {
                isLogin:"<?php echo (!$uid||$uid<0)?'':$uid ?>",
                nav:0,
                phone:'',
                code:'',
                time:60,
                isSend:false,
                text:'获取验证码',
                successPhone:false,
                wordsText:'领取成功',
                wordsText2:'稍后会有老师联系您，请保持手机畅通！',
                teacher:'',
                contact:false,
                reservePhone:'',
                reserveCode:'',
                reserveTime:60,
                reserveIsSend:false,
                reserveText:'获取验证码',
                reserve:false,
                showFm:true,
                isPlay:false,//是否在播放中
                isFull:false,//是否全屏
                isTip:false,//显示提示页
                player:'',//实例化视频
                currentTime:0,//当前视频播放时间 s 单位
                durationTime:0,//总时长 s 单位
                current:'00:00',
                duration:'00:00',
                playlist: [{
                    sources: [{
                        file: $('#videoUrl').val(),
                        // file: 'https://file.viplgw.cn/ui/videoList/GREMath-Helen2020.mp4',
                    }],
                }],
            }
        },
        created() {
            let that = this;
            this.player = cyberplayer("playContent").setup(this.playlist[0]);
            this.addTICEventListener();//开始监听点播事件
        },
        mounted() {
            let that = this;
            //页面卸载
            window.onbeforeunload = function (e) {
                e = e || window.event;
                _czc.push(['_trackEvent','老师详情-<?php echo $detail["name"]?>','播放结束（关闭页面或者返回页面）','试听课程',that.currentTime])

            };
        },
        methods:{
            changeNav(nav,name,teacherName){
                this.nav =  nav;
                _czc.push(['_trackEvent','老师详情',name,teacherName,''])
            },
            getCode(){
                let that = this;
                let myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
                if(that.phone.replace(/\s*/g, "") != ''&&myreg.test(that.phone)){
                    if(!that.isSend){
                        that.isSend = true;
                        $.post('/cn/api/phone-code',{
                            phone:that.phone
                        },function (res) {
                            if(res.code == 1){
                                let timer = setInterval(function () {
                                    that.time --;
                                    if(that.time >= 0){
                                        that.text = that.time +'s';
                                    }else {
                                        clearInterval(timer);
                                        that.isSend = false;
                                        that.text = '获取验证码';
                                        that.time = 60;
                                    }
                                },1000)
                            }else {
                                that.isSend = false;
                                alert(res.message)
                            }
                        },'json')

                    }
                }else {
                    alert('手机号码有误');
                }
                _czc.push(['_trackEvent','机经获取','获取验证码','',''])
            },
            submitSure(){
                let that = this;
                let myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
                if(that.phone.replace(/\s*/g, "") != ''&&myreg.test(that.phone)&&that.code.replace(/\s*/g, "") != ''){
                    $.post('/cn/api/leave-words',{
                        phone:that.phone,
                        code:that.code,
                        remark:'机经获取',
                    },function (res) {
                        if(res.code == 1){
                            that.successPhone = !that.successPhone;
                            that.wordsText = '领取成功';
                            that.wordsText2 = '稍后会有老师联系您，请保持手机畅通！';
                            _czc.push(['_trackEvent','机经获取','机经获取（成功)','',''])
                        }else {
                            alert(res.message)
                        }
                    },'json')

                }else {
                    alert('手机号码/验证码有误')
                }

            },
            reserveGetCode(){
                let that = this;
                let myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
                if(that.reservePhone.replace(/\s*/g, "") != ''&&myreg.test(that.reservePhone)){
                    if(!that.reserveIsSend){
                        that.reserveIsSend = true;
                        $.post('/cn/api/phone-code',{
                            phone:that.reservePhone
                        },function (res) {
                            if(res.code == 1){
                                let timer = setInterval(function () {
                                    that.reserveTime --;
                                    if(that.reserveTime >= 0){
                                        that.reserveText = that.reserveTime +'s';
                                    }else {
                                        clearInterval(timer);
                                        that.reserveIsSend = false;
                                        that.reserveText = '获取验证码';
                                        that.reserveTime = 60;
                                    }
                                },1000)
                            }else {
                                that.reserveIsSend = false;
                                alert(res.message)
                            }
                        },'json')

                    }
                }else {
                    alert('手机号码有误');
                }
            },
            reserveSubmitSure(){
                let that = this;
                let myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
                if(that.reservePhone.replace(/\s*/g, "") != ''&&myreg.test(that.reservePhone)&&that.reserveCode.replace(/\s*/g, "") != ''){
                    $.post('/cn/api/leave-words',{
                        phone:that.reservePhone,
                        code:that.reserveCode,
                        remark:that.teacher +'预约试听',
                    },function (res) {
                        if(res.code == 1){
                            that.reserve = false;
                            that.successPhone = !that.successPhone;
                            that.wordsText = '预约成功';
                            that.wordsText2 = '已成功预约'+ that.teacher +'老师的试听课程，稍后会有老师和您\n' +
                                '电话联系，并确认相关信息，请您保持电话畅通，谢谢配合！';
                        }else {
                            alert(res.message)
                        }
                    },'json')

                }else {
                    alert('手机号码/验证码有误');
                }

            },
            contactTeacher(teacher){
                this.teacher = teacher;
                this.contact = true;
            },
            reserveTeacher(teacher){
                this.teacher = teacher;
                this.reserve = true;
            },
            //播放视频
            playVideo(){
                this.player.play();
                this.showFm = false;
                _czc.push(['_trackEvent','老师详情-<?php echo $detail["name"]?>','试听播放','试听课程',''])
            },
            //暂停视频
            pauseVideo(){
                this.player.pause();
            },
            //全屏播放
            fullScrren(){
                this.isFull = true;
            },
            //退出全屏播放
            outfullScrren(){
                this.isFull = false;
            },
            //重新播放
            again(){
                this.player.seek(0);
            },
            //事件响应状态监听
            addTICEventListener(){
                let that = this;
                this.player.onReady(function (event) {

                });
                this.player.onPlay(function (event) {
                    that.isPlay = true;
                });
                this.player.onPause(function (event) {
                    that.isPlay = false;
                });
                this.player.onBufferChange(function (event) {

                });
                this.player.onBuffer(function (event) {

                });
                this.player.onBufferFull(function (event) {

                });
                this.player.onSeek(function(event){
                    that.currentTime = event.offset;
                });
                this.player.onTime(function(event){//监听视频正在播放中
                    that.isPlay = true;
                    that.currentTime = event.position;
                    that.current = that.s_to_hs(event.position);
                    that.duration = that.s_to_hs(event.duration);
                    if(that.currentTime > 300 && that.isLogin ==''){ //五分钟未登录提示登录观看
                        that.pauseVideo();
                        that.isPlay = false;
                        that.isTip = true;
                    }else {
                        that.isTip = false;
                    }

                });
                this.player.onComplete(function (event) {//视频播放完成
                    that.isPlay = false;

                });
                this.player.onStop(function (event) {//视频播放完成
                    that.isPlay = false;

                });
                this.player.onVolume(function(event){//监听音量变换

                });
            },
            s_to_hs(value){
                let result = parseInt(value);
                let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
                let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
                let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));

                let res = '';
                // if(h !== '00') res += `${h}:`;
                // if(m !== '00') res += `${m}:`;
                if(h !== '00') res += `${h}:`;
                res += `${m}:`;
                res += `${s}`;
                return res;

            },
        },
    });
</script>
